<template>
    <div class="page">
        <!-- 顶部banner -->
        <div class="topBanner_1" :class="levelBg">
            <div class="content">
                <div class="topInfo">
                    <div class="leftinfo">
                        <img class="head" src="@/assets/benefitDetail/head.png" />
                        <div>
                            <div class="userName">
                                {{ infoDeatil.agentName }}
                                <img v-if="infoDeatil.currProfitGrade == 'L0'" class="levelIcon" src="@/assets/benefitDetail/L0Icon.png" />
                                <img v-if="infoDeatil.currProfitGrade == 'L1'" class="levelIcon" src="@/assets/benefitDetail/L1Icon.png" />
                                <img v-if="infoDeatil.currProfitGrade == 'L2'" class="levelIcon" src="@/assets/benefitDetail/L2Icon.png" />
                                <img v-if="infoDeatil.currProfitGrade == 'L3'" class="levelIcon" src="@/assets/benefitDetail/L3Icon.png" />
                                <img v-if="infoDeatil.currProfitGrade == 'L4'" class="levelIcon" src="@/assets/benefitDetail/L4Icon.png" />
                                <img v-if="infoDeatil.currProfitGrade == 'L5'" class="levelIcon" src="@/assets/benefitDetail/L5Icon.png" />
                                <img v-if="infoDeatil.currProfitGrade == 'L6'" class="levelIcon" src="@/assets/benefitDetail/L6Icon.png" />
                            </div>
                            <div class="userPhone">{{ infoDeatil.phone }}</div>
                        </div>
                    </div>
                    <div class="rightIcon">
                        <img v-if="infoDeatil.currProfitGrade == 'L0'" src="@/assets/benefitDetail/L0Logo.png" />
                        <img v-if="infoDeatil.currProfitGrade == 'L1'" src="@/assets/benefitDetail/L1Logo.png" />
                        <img v-if="infoDeatil.currProfitGrade == 'L2'" src="@/assets/benefitDetail/L2Logo.png" />
                        <img v-if="infoDeatil.currProfitGrade == 'L3'" src="@/assets/benefitDetail/L3Logo.png" />
                        <img v-if="infoDeatil.currProfitGrade == 'L4'" src="@/assets/benefitDetail/L4Logo.png" />
                        <img v-if="infoDeatil.currProfitGrade == 'L5'" src="@/assets/benefitDetail/L5Logo.png" />
                        <img v-if="infoDeatil.currProfitGrade == 'L6'" src="@/assets/benefitDetail/L6Logo.png" />
                    </div>
                </div>
                <!-- 进度条 -->
                <div class="tradeProgress">
                    <div>总交易额 {{ infoDeatil.transAmount }}/{{ infoDeatil.qualifiedAmount }}</div>
                    <div class="bottomProgress">
                        <van-progress :color="progressColor" :percentage="infoDeatil.progressPercentage" stroke-width="8" />
                    </div>
                    <div class="dateMonth">定档月份：{{ infoDeatil.canExamineDate }}</div>
                </div>
            </div>
        </div>
        <div style="width: 90vw; margin: 0 auto">
            <div class="tradeNum">
                <div class="tradeItem">
                    <div>
                        <div class="moneyNum">{{ infoDeatil.teamTransAmount }}</div>
                        <div class="text">团队交易量(元)</div>
                    </div>
                    <img src="@/assets/benefitDetail/tradeTeam.png" />
                </div>
                <div class="tradeItem">
                    <div>
                        <div class="moneyNum">{{ infoDeatil.directTransAmount }}</div>
                        <div class="text">自营交易量(元)</div>
                    </div>
                    <img src="@/assets/benefitDetail/tradeSelf.png" />
                </div>
            </div>
            <!-- 专享权益 -->
            <div class="exclusiveInterest">
                <div class="isTitle">
                    <div class="titleLeft"></div>
                    <div class="titleText">专享权益</div>
                    <div class="titleRight"></div>
                </div>
                <div class="navList">
                    <div class="navItem" v-for="(item, index) in navList" :key="index">
                        <img class="navImg" :src="item.img" />
                        <div>{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { profitGradeDetails } from '@/api/benefitDetail.ts'
import img1 from '@/assets/benefitDetail/nav1.png'
import img2 from '@/assets/benefitDetail/nav2.png'
import img3 from '@/assets/benefitDetail/nav3.png'
import img4 from '@/assets/benefitDetail/nav4.png'
import img5 from '@/assets/benefitDetail/nav5.png'
import img6 from '@/assets/benefitDetail/nav6.png'
import img7 from '@/assets/benefitDetail/nav7.png'
import img8 from '@/assets/benefitDetail/nav8.png'
import img9 from '@/assets/benefitDetail/nav9.png'
const infoDeatil = ref({})
// 根据分润等级修改背景
const levelBg = computed(() => {
    if (infoDeatil.value.currProfitGrade == 'L0' || infoDeatil.value.currProfitGrade == 'L1' || infoDeatil.value.currProfitGrade == 'L2') {
        return 'topBg1'
    } else if (infoDeatil.value.currProfitGrade == 'L3' || infoDeatil.value.currProfitGrade == 'L4') {
        return 'topBg2'
    } else if (infoDeatil.value.currProfitGrade == 'L5' || infoDeatil.value.currProfitGrade == 'L6') {
        return 'topBg3'
    }
})
// 根据分润等级修改进度条背景颜色
const progressColor = computed(() => {
    if (infoDeatil.value.currProfitGrade == 'L0' || infoDeatil.value.currProfitGrade == 'L1' || infoDeatil.value.currProfitGrade == 'L2') {
        return '#002BA4'
    } else if (infoDeatil.value.currProfitGrade == 'L3' || infoDeatil.value.currProfitGrade == 'L4') {
        return '#603B1B'
    } else if (infoDeatil.value.currProfitGrade == 'L5' || infoDeatil.value.currProfitGrade == 'L6') {
        return '#7D2600'
    }
})
const background = ref('@/assets/benefitDetail/1_2Bg.png')
const navList = reactive([
    {
        img: img1,
        name: '服务收益'
    },
    { img: img2, name: '服务费返现' },
    { img: img3, name: '积分' },
    { img: img4, name: 'VIP专属客服' },
    // { img: img5, name: '赢家分红' },
    { img: img6, name: '固定费率补贴' },
    // { img: img7, name: '钻石奖励' },
    // { img: img8, name: '私董会' },
    { img: img9, name: '管理津贴' }
])
const getprofitGradeDetails = () => {
    profitGradeDetails().then(res => {
        infoDeatil.value = res.object

        console.log(infoDeatil.value.progressPercentage * 100)

        // infoDeatil.value.num = Number(infoDeatil.value.progressPercentage)

    })
}
getprofitGradeDetails()
</script>
<style scoped lang="scss">
.page {
    height: 100vh;
    background: #fff;
}
.topBg1 {
    background: url('@/assets/benefitDetail/1_2Bg.png') no-repeat top left / 100% 100% !important;
    .content {
        background: linear-gradient(158deg, #66d6ff 0%, #a9c8fe 100%) !important;
    }
}
.topBg2 {
    background: url('@/assets/benefitDetail/3_4Bg.png') no-repeat top left / 100% 100% !important;
    .content {
        background: linear-gradient(158deg, #cb9a71 0%, #fcd9ba 100%) !important;
    }
}
.topBg3 {
    background: url('@/assets/benefitDetail/5_6Bg.png') no-repeat top left / 100% 100% !important;
    .content {
        background: linear-gradient(158deg, #fe7f2b 0%, #fecea9 100%) !important;
    }
}
.topBanner_1 {
    // background: url('@/assets/benefitDetail/1_2Bg.png') no-repeat top left / 100% 100%;
    padding: 14px 0;
    .content {
        width: 90vw;
        padding: 16px;
        border: 1px solid #ffffff;
        // background: linear-gradient(158deg, #66d6ff 0%, #a9c8fe 100%);
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
        border-radius: 16px;
        margin: 0 auto;
        .topInfo {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
            .leftinfo {
                display: flex;
                align-items: center;
                color: #fff;
                .userName {
                    margin-bottom: 10px;
                    font-size: 16px;
                }
                .levelIcon {
                    width: 27px;
                    height: 16px;
                    margin-left: 14px;
                }
                .head {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    margin-right: 6px;
                }
            }
            .rightIcon {
                width: 100px;
                height: 82px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .tradeProgress {
            color: #fff;
            .bottomProgress {
                margin-top: 15px;
            }
            .dateMonth {
                text-align: right;
                margin-top: 8px;
                font-size: 12px;
            }
        }
    }
}
.tradeNum {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    .tradeItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 48%;
        padding: 16px;
        background: linear-gradient(270deg, #fcdd96 0%, #fff5da 100%);
        opacity: 1;
        border-radius: 8px;
        img {
            width: 39px;
            height: 45px;
        }
        .moneyNum {
            font-size: 16px;
            font-family: DingTalk JinBuTi;
            font-weight: 400;
            color: #b76032;
            margin-bottom: 7px;
        }
        .text {
            font-size: 12px;
            font-family: SimHei;
            font-weight: 400;
            color: #978063;
        }
    }
}
.exclusiveInterest {
    margin: 0 auto;
    padding: 18px;
    background: #fef9e6;
    opacity: 1;
    border-radius: 8px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .isTitle {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-family: SimHei;
        font-weight: 400;
        color: #371300;
        .titleLeft {
            width: 34px;
            height: 5px;
            background: linear-gradient(270deg, #f9d789 0%, #fef9e6 100%);
        }
        .titleText {
            margin: 0 10px;
        }
        .titleRight {
            width: 34px;
            height: 5px;
            background: linear-gradient(90deg, #f9d789 0%, #fef9e6 100%);
        }
    }
    .navList {
        display: flex;
        // justify-content: space-around;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 21px;
        .navItem {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 19px;
            font-size: 13px;
            font-family: SimHei;
            font-weight: 400;
            color: #973f11;
            .navImg {
                width: 44px;
                height: 44px;
                margin-bottom: 12px;
            }
        }
    }
}
</style>
